import { createApp } from 'vue'
import { createPinia } from 'pinia'

import {
  ConfigProvider,
  Button,
  Toast,
  Empty,
  Lazyload,
  Skeleton, SkeletonTitle, SkeletonImage, SkeletonAvatar, SkeletonParagraph,
  Col, Row,
  Loading,
  NavBar,
  Form, Field,
  Cell, CellGroup,
  Image as VanImage,
  Checkbox, CheckboxGroup,
  Tabbar, TabbarItem,
  Card,
  DropdownMenu, DropdownItem,
  SubmitBar,
  Icon,
  AddressList,
  AddressEdit,
  ActionBar,
  ActionBarIcon,
  ActionBarButton,
  SwipeCell,
  Stepper,
  BackTop,
  Swipe, SwipeItem,
  Tab, Tabs,

  showToast,
} from 'vant'
import 'vant/lib/index.css'
import '@vant/touch-emulator'

import App from './App.vue'
import router from './router'

import './assets/main.scss'

const app = createApp(App)
const pinia = createPinia()

router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title as string
  }
  next()
})

// 为pinia挂载方法
// pinia.use()

// app.config.errorHandler = (err) => {
//   /* 处理错误 */
//   console.warn('组件级别错误', err)
// }

// 全局方法挂载
// app.config.globalProperties.$toast = showToast
app.provide('$toast', showToast)

// 全局组件挂载

app.use(pinia)
app.use(router)

// 全局vant组件挂载
app.use(ConfigProvider)
app.use(Button)
app.use(Toast)
app.use(Empty)
app.use(Lazyload, {
  lazyComponent: true, // 组件懒加载包裹容器
})
app.use(Skeleton)
app.use(SkeletonTitle)
app.use(SkeletonImage)
app.use(SkeletonAvatar)
app.use(SkeletonParagraph)
app.use(Col)
app.use(Row)
app.use(Loading)
app.use(NavBar)
app.use(Form)
app.use(Field)
app.use(Cell)
app.use(CellGroup)
app.use(VanImage)
app.use(Checkbox)
app.use(CheckboxGroup)
app.use(Tabbar)
app.use(TabbarItem)
app.use(Card)
app.use(DropdownMenu)
app.use(DropdownItem)
app.use(SubmitBar)
app.use(Icon)
app.use(AddressList)
app.use(AddressEdit)
app.use(ActionBar)
app.use(ActionBarIcon)
app.use(ActionBarButton)
app.use(SwipeCell)
app.use(Stepper)
app.use(BackTop)
app.use(Swipe)
app.use(SwipeItem)
app.use(Tab)
app.use(Tabs)

app.mount('#app')
